<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
		</view>
		<view class="show">
			<view class="sone">
				<view class="sonefoot">
					<view class="sfone">
						<view class="sfoneleft">
							<view class="sfoneleftfirst">{{this.projectName}}-{{this.areaName}}</view>
							<view :class="beitype=='0'?'sfoneleftsun':'sfoneleftsun1'" @click="bbtn">备注：{{this.marks}}</view>
							<!-- <view :class="beitype=='1'?'sfoneleftsun1':'sfoneleftsun'" @click="bbtn(1)">备注：{{this.marks}}</view> -->
						</view>
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//up.png" v-show="beitype==1&&this.marks.length>18" @click="bbtn"></image>
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//down.png" v-show="beitype==0&&this.marks.length>18" @click="bbtn"></image>
						<view class="sfoneright" @click="shuxin">
							刷新
						</view>
						
					</view>
					<view class="sftwo">
						<view class="sftwoleft">
							<view class="sftwotap">
								<view class="sleftone">在线</view>
								<view class="stxt">充电桩已联网</view>
							</view>
							<view class="sftwotap">
								<view class="slefttwo">离线</view>
								<view class="stxt">充电桩已断网</view>
							</view>	
						</view>
						<view class="sftworight">
							<view class="srbtn" @click="scan" v-show="deviceSettings==1">添加设备</view>
						</view>
					</view>
				</view>
			</view>
			<view class="stwo">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadMore">
				<van-cell v-for="(item, index) in blist" :key="index" >
				<view class="stwotap">
					<view class="stwoson1">
						<view class="stapleft">
							<view class="stfone" v-show="item.state=='联网'">在线</view>
							<view class="stfone1" v-show="item.state=='断网'">离线</view>
							<view class="stftwo">{{item.code}}</view>
						</view>
						<view class="stapz">
							<!-- 2G | 50% -->
							{{item.signals}} | {{item.module}}
						</view>
						<view class="stapright">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//tapdel.png" class="imgtwo" @click="detailnum(item.id)"></image>
						</view>
					</view>
					<view class="stwoson2">
						<view class="stwosonleft1">分合闸: <span v-show='item.offType==1'>合</span><span v-show='item.offType==0'>分</span></view>
						<view class="stwosonleft1">烟感触发: <span v-show='item.smokeType==0'>无</span><span v-show='item.smokeType==1'>有</span></view>
					</view>
					<view class="stwoson2">
						<view class="stwosonleft1">报警开关: <span v-show='item.alertType==0'>关</span><span v-show='item.alertType==1'>开</span></view>
						<view class="stwosonleft1">温度: {{item.temperature}}</view>
					</view>
					<view class="stwoson2">
						<view class="stwosonleft1">当前电流: {{item.current}}A</view>
						<view class="stwosonleft1">当前漏电流: {{item.lossCurrent}}mA</view>
					</view>
					<view class="stwoson2">
						<view class="stwosonleft1">电表当前电流: {{item.meterCurrent}}A</view>
						<view class="stwosonleft1">当前电压: {{item.voltage}}V</view>
					</view>
					
					<view class="stwoson2">
						<view class="stwosonleft1">本机电表: {{item.totalEnergy}}度</view>
						<view class="stwosonleft1">外接电表: {{item.meterTotalEnergy}}度</view>
					</view>
					<view class="stwoson2">
						<view class="stwosonleft1">版本号: {{item.version}}</view>
						<view class="stwosonleft1">设备类型: {{item.devicedType}}</view>
					</view>
					<view class="stwoson2">
						<view class="stwosonleft2">sim卡号: {{item.sim}}</view>
						
					</view>
					<view class="stwoson2">
						<view class="stwosonleft2">最后联网时间: {{item.time}}</view>
						
					</view>
					
				</view>
				</van-cell>
				</van-list>
				</van-pull-refresh>	
			</view>
			<!-- //设备详情弹窗提示 -->
			<van-popup v-model="xqshow">
				<view class="tannei">
					<view class="tnhand">
						<view class="tntxt">设备详情</view>
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//close.png" @click="xqshowclose"></image>
					</view>
					<view class="tnshow">主机信息</view>
					<view class="tnfoot">
						<view class="tntap">
							<view class="tntapleft" style="width: 100upx;">sim号:</view>
							<view class="tntaoright">{{host.simCodes}}</view>
						</view>
						<view class="tntap">
							<view class="tntapleft">主机类型:</view>
							<view class="tntaoright">{{host.hostType}}</view>
						</view>
						<view class="tntap">
							<view class="tntapleft">固件版本:</view>
							<view class="tntaoright">{{host.version}}</view>
						</view>
					</view>
					<view class="tnshow">从机信息</view>
					<view class="tnfoot">
						<view class="tntap">
							<view class="tntapleft">设备类型:</view>
							<view class="tntaoright">{{equipment.deviceType}}</view>
						</view>
						<view class="tntap">
							<view class="tntapleft">固件版本号:</view>
							<view class="tntaoright">{{equipment.version}}</view>
						</view>
						<view class="tntap">
							<view class="tntapleft">最大充电时长:</view>
							<view class="tntaoright">{{equipment.longTime}}小时</view>
						</view>
						<view class="tntap">
							<view class="tntapleft">最大充电功率:</view>
							<view class="tntaoright">{{equipment.longPower}}瓦</view>
						</view>
					</view>
				</view>
			</van-popup>
		
		</view>
	</view>
</template>

<script>
	// import wx from "../../common/jweixin-module/index.js"
	// import { Dialog } from 'vant';
	export default {
		components: {},
		mounted() {
			
		},

		data() {
			return {
				xqshow:false,//设备详情弹窗
				cshow:false,//参数设置弹窗
				nameshow:false,//修改名称弹窗
				areaId:'',//充电区ID
				projectId:'',
				name:'',//名称
				marks:'',//备注
				marks1:'',//备注
				longPower:'',//最大充电功率
				longTime:'',//最大充电时间
				blist:[],//设备列表
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
				host:{},//主机信息
				equipment:{},//设备信息
				deviceId:'',//设备编号
				isProportion:'',
				deviceSettings:0,
				monthlyList:[],//包月数据
				oftenList:[],//常用数据
				temporaryList:[],//临时数据
				feilv:false,//费率显示
				firstone:false,
				oftenminMoney:'',//常用最低消费
				oftenlossRate:'',//常用电损率
				oftentypes:'',
				isFund:'',//是否允许退费
				lsminMoney:'',//临时最低消费
				first:'',
				second:'',
				third:'',
				fourth:'',
				oneremarks:'',//包月备注
				tworemarks:'',//常用备注
				threeremarks:'',//临时备注
				projectName:'',//小区名
				areaName:'',//充电区名
				beitype:0,//备注信息展开
			}
		},
		onLoad(options) {
			this.projectId=options.projectId
			this.areaId=options.id
			this.marks=options.marks
			this.marks1=options.marks
			this.isProportion=options.isProportion
			this.deviceSettings=options.deviceSettings
			this.projectName=options.projectName
			this.areaName=options.areaName
			this.name=options.areaName
		},
		methods: {
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},
			
			//删除设备
			detailnum(id){
				if(this.deviceSettings=='1'){
					Dialog.confirm({
					  title: '标题',
					  message: '确认删除？'
					}).then(() => {
					  this.$base.request1('manager/host'+'/'+id, 'DELETE')
					  	.then(res => {
					  		if(res.data.code=='200'){
					  			this.$toast.success(res.data.msg)
					  			this.blist=[];
					  			this.onRefresh();
					  		}else{
					  			this.$toast.fail(res.data.msg)
					  		}
					  	})
					  	.catch(err => {
					  
					  	})
					}).catch(() => {
					  // on cancel
					});
				}else{
					this.$toast.fail('您暂无权限')
					return
				}
			},
			//关闭设备详情弹窗
			xqshowclose() {
				this.xqshow = false
			},
			
			//打开设备详情弹窗
			xqshowopen(id) {
				this.xqshow = true
				this.$base.request1('manager/equipment'+'/'+id, 'GET')
					.then(res => {
						if(res.data.data.host){
							this.host=res.data.data.host[0]
						}
						if(res.data.data.equipment){
							this.equipment=res.data.data.equipment[0]
						}
					})
					.catch(err => {
				
					})
			},
			
			//添加设备
			scan() {
				if(this.deviceSettings=='1'){
					let _this = this;
					let data={
						url:location.href.split('#')[0],
						appid:uni.getStorageSync('user').appid
					}
					_this.$base.request('configs', 'GET',data)
						.then(res => {
							if(res.data.code=='200'){
								var timestamp = res.data.data.timestamp;;
								var noncestr = res.data.data.noncestr;
								var signature = res.data.data.signature;
								var appId=res.data.data.appid;
								wx.config({
									debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
									//debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
									appId : appId, // 必填，公众号的唯一标识
									timestamp : timestamp, // 必填，生成签名的时间戳
									nonceStr : noncestr, // 必填，生成签名的随机串
									signature :signature,// 必填，签名，见附录1
									jsApiList: ['scanQRCode',] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
								});
								
								wx.ready(function() {
									wx.scanQRCode({
										needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
										scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
										success: function (res1) {
											var dk=res1.resultStr.split('/')
											_this.deviceId=dk[dk.length-2]
											_this.jkbtn();
										}
									});
								});
							}else{
								this.$toast.fail(res.data.msg)
								return
							}
							
						})
						.catch(err => {
					
						})
					
				}else{
					this.$toast.fail('您暂无权限')
					return
				}
			},
			jkbtn(){
				let data={
					deviceId:this.deviceId,
					areaId:this.areaId
				}
				this.$base.request1('manager/host', 'POST',data)
					.then(res => {
						if(res.data.code=='200'){
							this.$toast.success(res.data.msg)
							this.blist=[];
							this.onRefresh();
						}else{
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {
				
					})
			},
			//刷新
			shuxin(){
				this.blist=[];
				this.onRefresh();
			},
			// 设备列表分页
			loadMore() {
				
				if (this.refreshing) {
				  this.blist = [];
				  this.refreshing = false;
				}
				const that = this;
				let data = {
					pageNum:that.pageNum,
					pageSize:that.pageSize,
				}
				that.loading = true;
				that.$base.request1('manager/host/list'+'/'+this.areaId, 'GET', data)
					.then(res => {
						that.loading = false;
						if(res.data.data&&res.data.data.length>0){
							var arr=res.data.data
							for(var i=0;i<arr.length;i++){
								if(arr[i].portState){
									arr[i]["dknumber"]=arr[i].portState.split(',')
								}else{
									arr[i]["dknumber"]=[]
								}
								
							}
							that.blist = that.blist.concat(arr);
							
							that.pageNum += 1;
						}else{
							that.finished = true;
						}
					})
					.catch(err => {
				
					})
			},
			 onRefresh() {
			      // 清空列表数据
			      this.finished = false;
				  this.pageNum=1
			      // 重新加载数据
			      // 将 loading 设置为 true，表示处于加载状态
			      this.loading = true;
			      this.loadMore();
			    },
			showclose(){
				this.feilv=false
			},
			//备注信息展开
			bbtn(){
				if(this.beitype==0){
					this.beitype=1
				}else if(this.beitype==1){
					this.beitype=0
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		/deep/.van-list__finished-text{
			line-height: 500upx;
		}
		.hand{
			width: 100%;
			background-color: #4B98ED;
			height: 62upx;
			font-size: 30upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 62upx;
			color: #ffffff;
			position: relative;
			image{
				width:22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 11upx;
			}
		}
		.show{
			width: 100%;
			box-sizing: border-box;
			/deep/.van-popup{
				border-radius: 16upx;
			}
			.sone{
				width: 100%;
				height: 100upx;
				background-color: #4b98ED;
				margin-bottom: 190upx;
				position: relative;
				.sonefoot{
					position: absolute;
					width: 686upx;
					border-radius: 8upx;
					box-shadow: 0upx 2upx 9upx 0upx rgba(22,22,22,0.1); 
					background-color: #FFFFFF;
					left: 32upx;
					box-sizing: border-box;
					.sfone{
						width: 100%;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						padding: 29upx 24upx;
						border-bottom: 1upx solid #d1d1d1;
						image{
							width: 28.16upx;
							height: 17.92upx;
							margin-top: 50upx;
						}
						.sfoneleft{
							
							.sfoneleftfirst{
								font-size: 32upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #333333;
								width: 500upx;
								overflow: hidden;
								text-overflow:ellipsis;
								white-space: nowrap;
							}
							
							.sfoneleftsun{
								font-size: 25upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								color: #757575;
								font-weight: 400;
								width: 500upx;
								overflow: hidden;
								text-overflow:ellipsis;
								white-space: nowrap;
								
							}
							.sfoneleftsun1{
								font-size: 25upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								color: #757575;
								font-weight: 400;
								width: 500upx;
								word-break:break-all;
								
							}
						}
						.sfoneright{
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #333333;
						}
					}
					.sftwo{
						width: 100%;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						padding: 30upx 23upx 29upx 24upx;
						.sftwoleft{
							.sftwotap{
								display: flex;
								align-items: center;
								.stxt{
									font-size: 28upx;
									font-family: PingFang SC Medium, PingFang SC Medium-Medium;
									font-weight: 500;
									color: #333333;
									margin-left: 20upx;
									line-height: 45upx;
								}
								.sleftone{
									background-color: #4BED4F;
									width: 60upx;
									text-align: center;
									font-size: 20upx;
									color: #fff;
									padding: 10upx 0;
									border-radius: 10upx;
									margin-bottom: 10upx;
								}
								.slefttwo{
									background-color: #FF0000;
									width: 60upx;
									text-align: center;
									font-size: 20upx;
									color: #fff;
									padding: 10upx 0;
									border-radius: 10upx;
								}
								.sleftthree{
									width: 14upx;
									height: 14upx;
									background-color: #4BED4F;
									border-radius: 50%;
									margin-left: 10upx;
									margin-right: 10.5upx;
								}
								
							}
						}
						.sftworight{
							.srbtn{
								width: 128upx;
								height: 48upx;
								border-radius: 8upx;
								font-size: 24upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								text-align: center;
								line-height: 48upx;
								color: #ffffff;
								background-color: #4B98ED;
								margin-bottom: 18upx;
							}
						}
					}
				}
			}
			.stwo{
				width: 100%;
				margin-bottom: 150upx;
				/deep/.van-cell:not(:last-child)::after{
					border-bottom: 0upx solid #FFFFFF;
				}
				.stwotap{
					width: 686upx;
					border-radius: 8upx;
					box-shadow: -1upx 4upx 9upx 0upx rgba(66,66,66,0.17); 
					margin:0 auto;
					align-items: center;
					box-sizing: border-box;
					padding: 23upx;
					margin-bottom: 10upx;
					.stwoson1{
						display: flex;
						.stapleft{
							width: 53%;
							display: flex;
							align-items: center;
							.stfone{
								background-color:#4BED4F;
								width: 60upx;
								text-align: center;
								font-size: 20upx;
								color: #fff;
								border-radius: 10upx;
							}
							.stfone1{
								
								background-color:#FF0000;
								width: 60upx;
								text-align: center;
								font-size: 20upx;
								color: #fff;
								border-radius: 10upx;
							}
							.stftwo{
								font-size: 28upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #333333;
								margin-left: 10upx;
							}
						}
						.stapfirst{
							font-size: 22upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #333333;
							display: flex;
							.stapfirstson{
								margin:0 10upx;
							}
						}
						.stapz{
							font-size: 22upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #333333;
							width: 35%;
						}
						.stapright{
							display: flex;
							align-items: center;
							.imgone{
								width: 38upx;
								height: 18upx;
							}
							.imgtwo{
								width: 32upx;
								height: 28upx;
								margin-left: 17upx;
							}
						}
					}
					.stwoson2{
						display: flex;
						padding-left: 40upx;
						.stwosonleft{
							width: 33%;
							font-size: 24upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #333333;
						}
						.stwosonleft1{
							font-size: 24upx;
							width: 50%;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #333333;
						}
						.stwosonleft2{
							font-size: 24upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #333333;
						}
					}
					
				
				}
			}
			.tannei{
				width: 630upx;
				background-color: #FFFFFF;
				
				.tnhand {
					width: 100%;
					height: 64upx;
					background-color: #4B98ED;
					align-items: center;
				
					.tntxt {
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #ffffff;
						line-height: 64upx;
						text-align: center;
						position: relative;
					}
				
					image {
						width: 25upx;
						height: 25upx;
						position: absolute;
						top: 19upx;
						right: 18upx;
					}
				}
				.tnshow{
					margin:0 20upx;
					padding: 15upx 0;
					border-bottom: 0.5upx solid #dddddd;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
				}
				.tnfoot{
					box-sizing: border-box;
					padding: 40upx 0upx 40upx 45upx;
					.tntap{
						width: 100%;
						display: flex;
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #333333;
						margin-bottom: 15upx;
						.tntapleft{
							width: 200upx;
							text-align: left;
						}
						.tntaoright{
							text-align: left;
						}
					}
				}
				.tnone{
					.tnonetap{
						width: 100%;
						box-sizing: border-box;
						padding: 20upx 70upx;
						display: flex;
						align-items: center;
						.toneleft{
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #333333;
						}
						input{
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #999999;
							width: 150upx;
							margin-left: 10upx;
							border-bottom: 1upx solid #e5e5e5;
						}
					}
					.tnoneshow{
						width: 100%;
						display: flex;
						align-items: center;
						.tnonetxt{
							width: 170upx;
							text-align: right;
							font-size: 28upx;
							color: #6c6c6c;
						}
						input{
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #999999;
							width: 400upx;
							border: 1upx solid #d8d8d8;
							margin: 20upx auto;
							padding: 10upx;
						}
						textarea{
							font-size: 28upx;
							height: 90upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #999999;
							width: 400upx;
							border: 1upx solid #d8d8d8;
							margin: 20upx auto;
							padding: 10upx;
						}
					}
				}
				.tntwo{
					width: 305upx;
					height: 64upx;
					border-radius: 8upx;
					background-color: #4B98ED;
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					text-align: center;
					line-height: 64upx;
					margin: 20upx auto;
					color: #ffffff;
				}
			}
			
		}
		
	}
</style>
